<template>
	<view class="content">
		<view class="pageHeader">
				<view>系统通知</view>
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
			<view>
				<view v-for="(item,index) in systemlist" :key="index"  style="margin-bottom:4upx;background-color: #fff;padding: 26upx 30upx;margin: 30upx 20upx;border-radius:20upx">
					<view  style="display: flex;position: relative;" >
							<view class="dt"><view class="data">{{item.add_time_time|subyear}}</br><view class="time">{{item.add_time_time|subday}}</view></view></view>
						<view style="display: flex;flex-direction: column;justify-content: space-between;flex:3;color: #333;">
							<view class="goods-info" style="font-size:30upx;">
								{{item.title}}
							</view>
							<!-- <view style="color: #666666;font-size: 24upx;margin-top: 22upx;line-height: 40upx;">
								<text v-if="!item.flag" v-html='$options.filters.ellipsis(item.content)'></text>
								<text v-if="item.flag" v-html='item.content '></text>
									<view v-if="item.content.length>60">
									  <view @click='handleFold(true,index)' v-show="!item.flag" style="color: #EC6104;">
									 查看更多...
									  </view>
									  <view @click='handleFold(false,index)' v-show="item.flag" style="color: #EC6104;">
										&lt;&lt;收起
									  </view>
									</view>
							</view> -->
						</view>
					 
					</view>
				</view>
			</view>
			 
		</view>
	</view>
	</template>
<script>
	import postAjax from '../../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				content:"APP系统升级,升级时间为219年11月23日 14:30-11月24日14:30.升级期间app时不可使 用,如有紧急问题请及时联系客服进行处理,望 请该解...APP系统升级,升级时间为219年11月23日 14:30-11月24日14:30.升级期间app时不可使 用,如有紧急问题请及时联系客服进行处理,望 请该解...",
				systemlist:{},
			}
		},
		filters: {
		    ellipsis (value) {
		      if (!value) return ''
		      if (value.length >60) {
		        return value.slice(0,60) + '...'
		      }
		      return value
		    },
			subyear (value) {
			  if (!value) return ''
			   
			    return value.slice(0,4) 
			  
			},
			subday (value) {
			  if (!value) return ''
			   
			    return value.slice(5,10) 
			  
			}
		  },
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			let getOptions = options
			that.SystemNotice()
			 
		},
		computed: {
		    
		},
		methods: {
			handleFold(fold,index) {
				  this.systemlist[index].flag = fold
			},
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
		 //
		 SystemNotice(){

		 	let that = this
		 	postAjax( 'Message/SystemNotice',{token:that.userToken,m:0},function(data){
		 		 
				 let noticeList=data.data;
				 let newArr = noticeList.map(v=>{
				      return {...v,flag:false}
				})
				 // let newList = noticeList.forEach((item,index)=>{  
					
					// item.flag=true;
			 				 				
				 // })  
		 		that.systemlist = newArr;
		 	})
		 },
			 
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:1;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 108upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 140upx 0upx 0upx;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
	.dt{
		
		width:148upx;
		 
	}
	.data{
		font-size: 28upx;
		
		color:#333333;
		
	}
	.time{
		font-size: 24upx;  
		color:#999999;
		
	}
</style>
